<template>
	<div v-if="showPopup" class="popup">
		<div :class="[ani, animation ? 'ani' : '', !custom ? 'custom' : '']" class="popup__mask" @click="close(true)" />
		<div :class="[type, ani, animation ? 'ani' : '', !custom ? 'custom' : '']" class="popup__wrapper" @click="close(true)">
			<div class="popup__wrapper-box" @click.stop="clear">
				<div class="popup-box">
                    <div class="popup-title">{{popupTitle}}</div>
                    <div class="popup-content">
						<slot />
					</div>
                    <div class="popup-btn-list">
                        <button class="__cancel" @click="cancel()">取消</button>
                        <button class="__confirm" @click="confirm()">确定</button>
                    </div>
                </div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		props: {
			// 弹出层类型，可选值，top: 顶部弹出层；bottom：底部弹出层；center：全屏弹出层
			type: {
				type: String,
				default: 'center'
			},
			// 是否开启自定义
			custom: {
				type: Boolean,
				default: false
			},
			// maskClick
			maskClick: {
				type: Boolean,
				default: true
			},
			show: {
				type: Boolean,
				default: true
			},
			popupTitle: {
				type: String,
				default: 'center'
			}
		},
		data() {
			return {
				ani: '',
				showPopup: false,
				callback : null
			}
		},
		watch: {
			show(newValue) {
				if (newValue) {
					this.open()
				} else {
					this.close()
				}
			}
		},
		created() {},
		methods: {
			clear() {},
			open(callback) {
				if(callback) this.callback = callback;
				
				this.$emit('change', {
					show: true
				})
				this.showPopup = true
				this.$nextTick(() => {
					setTimeout(() => {
						this.ani = '' + this.type
					}, 30)
				})
				
			},
			close(type,callback) {
				if (!this.maskClick && type) return
				this.$emit('change', {
					show: false
				})
				this.ani = ''
				this.$nextTick(() => {
					setTimeout(() => {
						this.showPopup = false
					}, 300)
				})
				
				if(callback) callback();
				
				if(this.callback) this.callback.call(this);
			},
			cancel() {
				setTimeout(() => {
					this.showPopup = false
				}, 300)
				this.$emit('cancel')
			},
			confirm() {
				setTimeout(() => {
					this.showPopup = false
				}, 300)
				this.$emit('confirm')
			}
		}
	}
</script>
<style>

	.popup {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 998;
		overflow: hidden
	}

	.popup__mask {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 998;
		background: rgba(0, 0, 0, .4);
		opacity: 0
	}

	.popup__mask.ani {
		transition: all .3s
	}

	.popup__mask.bottom,
	.popup__mask.center,
	.popup__mask.right,
	.popup__mask.left,
	.popup__mask.top {
		opacity: 1
	}

	.popup__wrapper {
		position: absolute;
		z-index: 999;
		box-sizing: border-box
	}

	.popup__wrapper.ani {
		transition: all .3s
	}

	.popup__wrapper.top {
		top: 0;
		left: 0;
		width: 100%;
		transform: translateY(-100%)
	}

	.popup__wrapper.bottom {
		bottom: 0;
		left: 0;
		width: 100%;
		transform: translateY(100%)
	}
	
	.popup__wrapper.right {
		bottom: 0;
		left: 0;
		width: 100%;
		transform: translateX(100%);
	}
	
	.popup__wrapper.left {
		bottom: 0;
		left: 0;
		width: 100%;
		transform: translateX(-100%);
	}

	.popup__wrapper.center {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		transform: scale(1.2);
		opacity: 0
	}

	.popup__wrapper-box {
		position: relative;
		box-sizing: border-box
	}

	.popup__wrapper.custom .popup__wrapper-box {
		/* padding: 30rpx; */
		background: #fff
	}

	.popup__wrapper.custom.center .popup__wrapper-box {
		position: relative;
		max-width: 80%;
		max-height: 80%;
		overflow-y: scroll
	}

	.popup__wrapper.custom.bottom .popup__wrapper-box,
	.popup__wrapper.custom.top .popup__wrapper-box {
		width: 100%;
		max-height: 500px;
		overflow-y: scroll
	}

	.popup__wrapper.bottom,
	.popup__wrapper.top {
		transform: translateY(0)
	}
	.popup__wrapper.left,.popup__wrapper.right {
		transform: translateX(0)
	}

	.popup__wrapper.center {
		transform: scale(1);
		opacity: 1
	}

    .popup-box {
        width: 80vw;
        padding: 0 3.2vw 4vw;
        box-sizing: border-box;
        background: #fff;
    }
    .popup-title {
        height: 11.7333vw;
        line-height: 11.7333vw;
    }
    .popup-btn-list {
        display: flex;
        justify-content: space-between;
    }
</style>